<template>
  <div class="animate__animated animate__fadeInLeft">
    <!-- Display course information -->
    <div class="container">
      <div v-if="course && Object.keys(course).length" class="course-details">
        <img :src="course.courseHover" alt="Course Cover Image" class="cover-image">
        <div class="course-info">
          <h2>{{ course.courseName }}</h2>
          <p>课程简介:{{ course.courseDescription }}</p>
          <div class="author-info">
            讲师:<img style="width: 18px; height: 20px; border-radius: 10px" :src="course.teacherAvatar"
                      alt="">
            <span style="margin-left: 1px">{{ course.teacherName }}</span>
          </div>
        </div>
        <div class="course-type">{{ course.courseTypeName }}</div>
      </div>
    </div>

    <div v-if="code===200" class="chapter-container">
        <ul>
          <li v-for="chapter in chapterList" :key="chapter.id">
            {{chapter.chapterName}}
            <ul>
              <li v-for="section in chapter.sectionVoList" :key="section.id" @click="playVideo(section.courseUrl)">
                {{section.sectionName}}
              </li>
            </ul>
          </li>
        </ul>
    </div>
    <div v-if="code===400" class="course-empty">
      <div>
        <img src="@/assets/images/course.png" alt="">
      </div>
      <h1>讲师还没发布对应的章节,敬请等待哦!</h1>
    </div>



  </div>
</template>


<script>
export default {
  data() {
    return {
      course: {},
      chapterList: [],
      code: 0
    };
  },
  created() {
    const {id} = this.$route.params;
    console.log(id);
    this.getCourseById(id);
    this.getChapterAndSectionList(id)
  }, methods: {
    getCourseById(id) {
      this.request.get(`/course/course/findCourseById/${id}`)
          .then((res) => {
            if (res.code === 200) {
              this.course = res.courseVo;
            }
          });
    },
    getChapterAndSectionList(id){
      this.request.get(`course/coursechapter/getChapterAndSectionList/${id}`)
          .then(res=>{
            if (res.code===200){
              console.log("000000000")
              console.log(res.allList)
              this.chapterList=res.allList
              console.log(this.chapterList)
            }
            this.code = res.code
          })
    },
    playVideo(courseUrl) {
      window.open(courseUrl, '_blank');

    }
  },
};
</script>

<style scoped>
.container {
  background-color: #fff;
  height: 400px;
  width: 1200px;
  margin-left: 200px;
  position: relative; /* 让容器相对定位 */
  display: flex;

}

.course-details {
  display: flex;
}

.cover-image {
  height: 400px;
}

.course-info {
  margin-left: 20px; /* Adjust this value as needed */
}

.course-type {
  position: absolute;
  top: 10px; /* Adjust vertical position */
  right: 10px; /* Adjust horizontal position */
  background-color: #ce2c2c;
  color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

.author-info {
  margin-top: 10px;

  position: absolute;
  display: flex;
  align-items: center;
}

.chapter-container{
  background-color: #fff;
  height: 100%;
  width: 1200px;
  margin-left: 200px;
  position: relative; /* 让容器相对定位 */
  display: flex;
  margin-top: 10px;
}

.chapter-container ul {
  list-style-type: none;
  padding: 0;
}

.chapter-container ul li {
  margin-top: 10px;
  cursor: pointer;
  margin-bottom: 5px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.chapter-container ul li:last-child {
  border-bottom: none;
}

.chapter-container ul li ul {
  margin-top: 5px;
  border-left: 2px solid #007bff; /* 添加边框样式 */
  padding-left: 10px; /* 调整边框与文本的距离 */
}

.chapter-container ul li ul li {
  margin-left: 0; /* 小节不再需要额外的左边距 */
}

.chapter-container ul li::before {
  content: "\2022";
  color: #007bff;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
}

.chapter-container ul li ul li::before {
  content: "\25CF";
  color: #28a745;
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: 1em;
}

.course-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #666;
  margin-top: 10px;
  background-color: #fff;
  height: 400px;
  width: 1200px;
  margin-left: 200px;
}
</style>
